<template>
  <div class="record-page">
    <div class="item" v-for="(item, index) in groupList" :key="index">
      <div class="info">
        <a @click="navClick('/pages/record-detail/main?groupId='+item.groupId)" >
          <div class="log">
            <img :src="item.img" mode="aspectFill" class="img">
            <span class="state">{{item.preStatus}}</span>
          </div>
          <div class="pInfo">
            <h3 class="name">{{item.title}}</h3>
            <p class="time">截止时间:  {{item.createTime}}</p>
          </div>
        </a>
      </div>
    </div>

    <tab-bar></tab-bar>
    <nullList v-if="showNull" config="{}"></nullList>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import nullList from '@/components/nullList'
import { timeStamp, imagesLink, overNowTime, timeSort, userLogin, paging } from '@/utils/index'
export default {
  name: '',
  data () {
    return {
      groupList: [],
      showNull: false
    }
  },
  components: {
    TabBar,
    nullList
  },
  methods: {
    navClick (url) {
      wx.navigateTo({
        url: url
      })
    },
    async requestFn () {
      var that = this
      this.page = 1
      this.load = true
      this.showNull = false
      this.groupList = []

      wx.showToast({
        icon: 'loading',
        title: '请求中...',
        duration: 50000
      })
      var groupList = await this.$request({
        url: '/GroupBuyBackendV1/groupBuyInfoByCreatorId/' + wx.getStorageSync('userId')
      })
      
      if (groupList.length == 0) {
        this.showNull = true
      }
      groupList.forEach(function(item, index) {
        item.img = imagesLink(item.images.split(','), 1)
        item.createTime = timeStamp(item.createTime)
        //超时
        if (item.dueDatetime && overNowTime(item.dueDatetime)) {
          item.preStatus = '已截止'
        }
      })
      timeSort(groupList)
      this.dataList = groupList
      wx.hideToast()
      
      var res = paging(groupList)
      if (res.data) {
        this.load = false
        this.groupList = res.data
        this.page++
        res.haveNext ? this.load = true : this.load = false
      }
    },
  },
  mounted () {
    userLogin()
    this.requestFn()
  },
  onUnload () {
    this.groupList = []
    this.showNull = false
  },
  onReachBottom () {
    var that = this
    if (this.load == true) {
      this.load = false
      var res = paging(this.dataList, this.page)

      if (res.data) {
        res.data.forEach(function(item, index) {
          that.groupList.push(item)
        })
        this.load = true
        this.page++
      }
      if (!res.haveNext) {
        this.load = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.item {
  background: #ffffff
  border-radius: 16rpx
  margin: 32rpx 30rpx
  padding: 32rpx 0
  position: relative
  box-shadow: 0 10rpx 20rpx #eee
  .info {
    margin: 0 48rpx
    a {
      overflow: hidden
    }
  }
  .log {
    float: left
    width: 96rpx
    height: 96rpx
    overflow: hidden
    position: relative
    border-radius: 16rpx
    box-sizing: border-box
    .img {
      width: 96rpx
      height: 96rpx
    }
    .state {
      color: #fff
      text-align: center
      font-size: 15rpx
      position: absolute
      left: 0
      bottom: 0
      width: 100%
      padding: 6rpx 0 0 5rpx
      background: rgba(0,0,0,.6)
    }
  }
  .pInfo {
    float: left
    margin-left: 20rpx
    .name {
      margin-top: 10rpx
      font-size: 36rpx
    }
    .time {
      margin-top: 6rpx
      color: #d3d3d3
      font-size: 22rpx
    }
    .btn {
      top: 50%
      transform: translateY(-50%)
      right: 30rpx
      width: 120rpx
      text-align: center
      line-height: 62rpx
      position: absolute
      font-size: 26rpx
      color: #fff
      border-radius: 31rpx
      background: #ff8942
    }
  }
}
</style>
